<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false"/>
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" content="详情"/>
        <div class="options">
          <el-button type="primary" @click="printDialog">打 印</el-button>
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row :gutter="60" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small" label-width="100px" label-position="top">
          <template v-if="!loading">
            <el-col :span="4">
              <el-row :gutter="30">
                <el-col :span="24">
                  <jnpf-form-tip-item>
                    <JnpfText
                      :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":12,"line-height":32,"font-style":"normal","text-align":"left"}'>
                    </JnpfText>
                  </jnpf-form-tip-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="16" class="quarterly-main">
              <el-row :gutter="30">
                <el-col :span="24">
                  <jnpf-form-tip-item label-width="0">
                    <JnpfText
                      :textStyle='{"color":"#1684FC","font-weight":"bold","text-decoration":"none","font-size":24,"line-height":32,"font-style":"normal","text-align":"center"}'
                      :closable="false" content="季度进度填报">
                    </JnpfText>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="企业名称"
                                      prop="enterpriseName">
                    <p>{{ dataForm.enterpriseName }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="企业信用代码" label-width="120px"
                                      prop="enterpriseCreditCode">
                    <p>{{ dataForm.enterpriseCreditCode }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="16">
                  <jnpf-form-tip-item label="项目名称"
                                      prop="projectName">
                    <p>{{ dataForm.projectName }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="服务商名称"
                                      prop="serverName">
                    <p>{{ dataForm.serverName }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="服务商统一社会信用代码" label-width="185px"
                                      prop="serverCreditCode">
                    <p>{{ dataForm.serverCreditCode }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="项目负责人"
                                      prop="projectLeader">
                    <p>{{ dataForm.projectLeader }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="联系电话"
                                      prop="phone">
                    <p>{{ dataForm.phone }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="开始时间"
                                      prop="startDate">
                    <p>{{ dataForm.startDate }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="结束时间"
                                      prop="endDate">
                    <p>{{ dataForm.endDate }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="区县" label-width="70px"
                                      prop="county">
                    <p>{{ dataForm.county }} </p>
                  </jnpf-form-tip-item>
                </el-col>

                <el-col :span="12">
                  <jnpf-form-tip-item label="数字化改造产品或服务预算（万元）" label-width="255px"
                                      prop="digitalBudgetTotal">
                    <p>{{ dataForm.digitalBudgetTotal }}万元</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="其他支出项预算 （万元）" label-width="190px"
                                      prop="otherDigitalTotal">
                    <p>{{ dataForm.otherDigitalTotal }}万元</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="总预算 （万元）" label-width="135px"
                                      prop="generalBudget">
                    <p>{{ dataForm.generalBudget }}万元</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="项目当季完成投资金额 （万元）" label-width="230px"
                                      prop="projectInseasonInvestment">
                    <JnpfNumber v-model="dataForm.projectInseasonInvestment"
                                placeholder="请输入" disabled
                                :step="1" addonAfter="万元">
                    </JnpfNumber>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item label="项目累计完成投资金额 （万元）" label-width="230px"
                                      prop="projectTotalInvestment">
                    <JnpfNumber v-model="dataForm.projectTotalInvestment"
                                placeholder="请输入" disabled
                                :step="1" addonAfter="万元">
                    </JnpfNumber>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="24">
                  <jnpf-form-tip-item label="项目形象进度"
                                      prop="projectImageProgress">
                    <p>{{ dataForm.projectImageProgress }}</p>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="24">
                  <jnpf-form-tip-item label="需协调解决的问题" label-width="130px"
                                      prop="solverProblem">
                    <p v-html="dataForm.solverProblem "></p>
                  </jnpf-form-tip-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="30">
                <el-col :span="24">
                  <jnpf-form-tip-item>
                    <JnpfText
                      :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":12,"line-height":32,"font-style":"normal","text-align":"left"}'>
                    </JnpfText>
                  </jnpf-form-tip-item>
                </el-col>
              </el-row>
            </el-col>
          </template>
        </el-form>
        <print-browse :visible.sync="printBrowseVisible" :id="printIdNow" :formId="dataForm.id"/>
        <PrintDialog v-if="printDialogVisible" ref="printDialog" @change="printBrowseHandle"/>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from '@/utils/request'
import PrintBrowse from '@/components/PrintBrowse'
import PrintDialog from '@/components/PrintDialog'

import {getConfigData} from '@/api/onlineDev/visualDev'
import jnpf from '@/utils/jnpf'
import Detail from '@/views/basic/dynamicModel/list/detail'
import {thousandsFormat} from "@/components/Generator/utils/index"

export default {
  components: {PrintBrowse, PrintDialog, Detail},
  props: [],
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,
      printBrowseVisible: false,
      printDialogVisible: false,
      printId: '530663888891414981',
      printIdNow: '',

      dataForm: {
        id: '',
        projectName: '',
        startDate: '',
        endDate: '',
        enterpriseName: '',
        enterpriseCreditCode: '',
        serverName: '',
        serverCreditCode: '',
        projectLeader: '',
        phone: '',
        county: "",
        digitalBudgetTotal: '',
        otherDigitalTotal: '',
        generalBudget: '',
        projectInseasonInvestment: '',
        projectTotalInvestment: '',
        projectImageProgress: '',
        solverProblem: '',
        creatoruserid: "",
        creatortime: "",
        lastmodifyuserid: "",
        lastmodifytime: "",
        projectId: '',
      },
      dataRule:
        {
          projectName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          startDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          endDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          enterpriseName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          enterpriseCreditCode: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          serverName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          serverCreditCode: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          projectLeader: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          phone: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          county: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          digitalBudgetTotal: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          otherDigitalTotal: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          generalBudget: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          projectInseasonInvestment: [
            {
              required: true,
              message: '请输入',
              trigger: ["blur", "change"]
            },
          ],
          projectTotalInvestment: [
            {
              required: true,
              message: '请输入',
              trigger: ["blur", "change"]
            },
          ],
          projectImageProgress: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          solverProblem: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
        },
      countyOptions: [{"fullName": "鼓楼区", "id": "鼓楼区"}, {"fullName": "台江区", "id": "台江区"}, {
        "fullName": "仓山区",
        "id": "仓山区"
      }, {"fullName": "马尾区", "id": "马尾区"}, {"fullName": "晋安区", "id": "晋安区"}, {
        "fullName": "长乐区",
        "id": "长乐区"
      }, {"fullName": "闽侯县", "id": "闽侯县"}, {"fullName": "连江县", "id": "连江县"}, {
        "fullName": "罗源县",
        "id": "罗源县"
      }, {"fullName": "闽清县", "id": "闽清县"}, {"fullName": "平潭县", "id": "平潭县"}, {
        "fullName": "福清市",
        "id": "福清市"
      }, {"fullName": "高新区", "id": "高新区"}],
      countyProps: {"label": "fullName", "value": "id"},

    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {
  },
  methods: {

    printBrowseHandle(id) {
      this.printDialogVisible = false
      this.printIdNow = id;
      this.printBrowseVisible = true;
    },
    printDialog() {
      this.printDialogVisible = true
      this.$nextTick(() => {
        if (this.printId.length === 1) {
          this.printBrowseHandle(this.printId.id)
          return
        }
        this.$refs.printDialog.init(this.printId.split(","))
      })
    },
    toDetail(defaultValue, modelId) {
      if (!defaultValue) return
      getConfigData(modelId).then(res => {
        if (!res.data || !res.data.formData) return
        let formData = JSON.parse(res.data.formData)
        formData.popupType = 'general'
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.Detail.init(formData, modelId, defaultValue)
        })
      })
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
    },

    goBack() {
      this.$emit('refresh')
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/Fz_no_flow_project_quarterly_progress/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    },
  },
}

</script>
<style lang="scss" scoped>
.main {
  ::v-deep .is-disabled .el-input__inner {
    background: #FFFFFF;
    color: #606266;
  }

  height: 100%;

  .quarterly-main {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) !important;
    border: 1px solid #EBEEF5;
    padding: 20px;
    border-radius: 5px;

    .el-select {
      pointer-events: none;

      .el-input__suffix {
        display: none;
      }
    }
  }
}
</style>
